<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /* css注释 */
        /* 1.标签选择器：直接写标签名称 */
        /*
        h1 {
            color: red;
        }
        */
        /* 如果两个h1的样式不同，如何控制 */
        /* 2.类选择器
         需要手动调用
         */
        .f1 {
            color: blue;
            background-color: pink;
        }
        .f2 {
            color: yellow;
            background-color: red;
        }
        /* 3.id选择器 */
        #f3 {
            color: green;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <h1 class="f1">达内</h1>
    <h1 class="f2">Linux云计算</h1>
    <h2 class="f1">Java</h2>
    <h3 id="f3">人工智能</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate delectus eaque ipsam iste laudantium maxime natus necessitatibus numquam obcaecati officia pariatur perspiciatis porro quas, qui quisquam repellat sed ullam vitae?</p>
    <p class="f2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cum inventore omnis qui sunt. Amet aperiam at delectus eligendi excepturi, exercitationem hic illo laboriosam modi perspiciatis quod rem rerum sit!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur facilis inventore, itaque mollitia officia quis soluta vel voluptatibus. Assumenda dolorum eligendi eum harum laboriosam necessitatibus nesciunt placeat quidem? Nulla?</p>
</body>
</html>